﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
	<script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
    <style type="text/css">
        .docs-toggle {
            display: inline-block;
        }

        .docs-toggle span {
            display: block;
            font-family: 'footable';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            -webkit-font-smoothing: antialiased;
            padding:20px;
            font-size: 34px;
            color: #888888;
            text-align:center;
        }

        .docs-toggle span:before {
            content: "\e000";
        }
        .docs-toggle:hover span:before {
            content: "\e001";
        }

        .docs-toggle.circle span:before {
                     content: "\e004";
                 }
        .docs-toggle.circle:hover span:before {
            content: "\e005";
        }

        .docs-toggle.arrow span:before {
            content: "\e003";
        }
        .docs-toggle.arrow:hover span:before {
            content: "\e002";
        }

        .docs-toggle.small span {
            font-size: 14px;
        }
        .docs-toggle.medium span {
            font-size: 20px;
        }
        .docs-toggle.large span {
            font-size: 28px;
        }
    </style>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">Icon Styles</li>
        </ul>
        <div class="alert">
            A demo showing off the different toggle icons styles and sizes. The toggle icons are now displayed using icon-fonts, which makes for easier styling to fit in with your existing theme. Simply add the specific class name to your table.
        </div>
        <p class="change-toggle-style">
            style : [ <a class="active" href="#">default</a> |
            <a href="#">toggle-circle</a> |
            <a href="#">toggle-circle-filled</a> |
            <a href="#">toggle-square</a> |
            <a href="#">toggle-square-filled</a> |
            <a href="#">toggle-arrow</a> |
            <a href="#">toggle-arrow-small</a> |
            <a href="#">toggle-arrow-circle</a> |
            <a href="#">toggle-arrow-circle-filled</a> |
            <a href="#">toggle-arrow-tiny</a> |
            <a href="#">toggle-arrow-alt</a> ]
        </p>
        <p class="change-toggle-style">
            size : [ <a class="active" href="#">default</a> |
            <a href="#">toggle-medium</a> |
            <a href="#">toggle-large</a> ]
        </p>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#demo">Demo</a></li>
			<li><a href="#docs">Docs</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="demo">
				<table class="table demo" data-filter="#filter" data-page-size="5" data-page-previous-text="prev" data-page-next-text="next">
					<thead>
						<tr>
							<th data-toggle="true">
								First Name
							</th>
							<th data-hide="all">
								Last Name
							</th>
							<th data-hide="all">
								Job Title
							</th>
							<th data-hide="all">
								DOB
							</th>
							<th data-hide="all">
								Status
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Isidra</td>
							<td><a href="#">Boudreaux</a></td>
							<td>Traffic Court Referee</td>
							<td data-value="78025368997">22 Jun 1972</td>
							<td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
						</tr>
						<tr>
							<td>Shona</td>
							<td>Woldt</td>
							<td><a href="#">Airline Transport Pilot</a></td>
							<td data-value="370961043292">3 Oct 1981</td>
							<td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
						</tr>
						<tr>
							<td>Granville</td>
							<td>Leonardo</td>
							<td>Business Services Sales Representative</td>
							<td data-value="-22133780420">19 Apr 1969</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
						</tr>
						<tr>
							<td>Easer</td>
							<td>Dragoo</td>
							<td>Drywall Stripper</td>
							<td data-value="250833505574">13 Dec 1977</td>
							<td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
						</tr>
						<tr>
							<td>Maple</td>
							<td>Halladay</td>
							<td>Aviation Tactical Readiness Officer</td>
							<td data-value="694116650726">30 Dec 1991</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
						</tr>
						<tr>
							<td>Maxine</td>
							<td><a href="#">Woldt</a></td>
							<td><a href="#">Business Services Sales Representative</a></td>
							<td data-value="561440464855">17 Oct 1987</td>
							<td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
						</tr>
						<tr>
							<td>Lorraine</td>
							<td>Mcgaughy</td>
							<td>Hemodialysis Technician</td>
							<td data-value="437400551390">11 Nov 1983</td>
							<td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
						</tr>
						<tr>
							<td>Lizzee</td>
							<td><a href="#">Goodlow</a></td>
							<td>Technical Services Librarian</td>
							<td data-value="-257733999319">1 Nov 1961</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
						</tr>
						<tr>
							<td>Judi</td>
							<td>Badgett</td>
							<td>Electrical Lineworker</td>
							<td data-value="362134712000">23 Jun 1981</td>
							<td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
						</tr>
						<tr>
							<td>Lauri</td>
							<td>Hyland</td>
							<td>Blackjack Supervisor</td>
							<td data-value="500874333932">15 Nov 1985</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="5">
								<div class="pagination pagination-centered"></div>
							</td>
						</tr>
					</tfoot>
				</table>
			</div>
			<div class="tab-pane" id="docs">
				<h4>Toggle Icon Styles</h4>
				<p>Add a class name to the table to change the default toggle icon stlye:</p>
                <pre>&lt;table class=&quot;footable table toggle-circle&quot;&gt;</pre>
                <div class="docs-toggle">
                    <span></span>
                    <code>default</code>
                </div>
                <div class="docs-toggle circle">
                    <span></span>
                    <code>toggle-circle</code>
                </div>
                <div class="docs-toggle arrow">
                    <span></span>
                    <code>toggle-circle-arrow</code>
                </div>
                <h4>Toggle Icon Size</h4>
                <p>Add a class name to the table to change the default toggle icon size:</p>
                <pre>&lt;table class=&quot;footable table toggle-medium&quot;&gt;</pre>
                <div class="docs-toggle small">
                    <span></span>
                    <code>default</code>
                </div>
                <div class="docs-toggle medium">
                    <span></span>
                    <code>toggle-medium</code>
                </div>
                <div class="docs-toggle large">
                    <span></span>
                    <code>toggle-large</code>
                </div>
			</div>
		</div>
	</div>
    <script type="text/javascript">
        $(function () {
			$('table').footable();

            $('.change-toggle-style a').click(function (e) {
                e.preventDefault();

                //reset styles
                $('.change-toggle-style .active').each(function() {
                    $('.demo').removeClass($(this).text());
                });

                //set active
                $(this).addClass('active').siblings().removeClass('active');

                //set active styles
                $('.change-toggle-style .active').each(function() {
                    $('.demo').addClass($(this).text());
                });
            });
        });
    </script>
</body>
</html>
